<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <meta charset="UTF-8">
    <title>贵族专属</title>
    <link href="/css/service.css" rel="stylesheet">

</head>
<body>
<div id="container">
    <div class="header">
        <span style="float: left;"th:text="欢迎+${session.user.phone}+进入客服对话"></span>
        <span style="float: right;"></span>
    </div>
    <ul class="content">

        <div class="speak_window">
            <div class="speak_box">
            </div>
        </div>
        <div class="wenwen-footer">
            <div class="wenwen_btn left" onClick="to_write()"></div>
            <div class="wenwen_text left">

            </div>
            <div class="wenwen_help right">
            </div>
        </div>
    </ul>

    <div id="Demo" style="text-align:center;">
        <div class="Main">
            <div class="Input_Box">

                <textarea class="Input_text" id="message" placeholder="说点什么吧..."></textarea>
                <div class="faceDiv"> </div>
                <div class="Input_Foot"> <a class="imgBtn"  href="javascript:void(0);"></a>
                    <a class="postBtn" onClick="up_say()">发送</a> </div>
            </div>
        </div>
    </div>
</div>





</body>
<script type="text/javascript" src="/js/jquery.min.js" ></script>
<script type="text/javascript">
    function to_write(){
        $('.Input_text,.wenwen_help button').show();
    }
    function up_say(){
        var text = $('.Input_text').val(),
            str  = '<div class="question">';
        str += '<div class="heard_img right"><img src="images/service.png"></div>';
        //自己发送的文字内容
        str += '<div class="question_text clear"><p>'+text+'</p><i></i>';

        if(text == ''){

        }else{
            $('.speak_box').append(str);
            $('.Input_text').val('');
            $('.Input_text').focus();


        }
    }

    var ImgIputHandler={

        Init:function(){
            var isShowImg=false;
            $(".imgBtn").click(function(){
                if(isShowImg==false){
                    isShowImg=true;
                    $(this).parent().prev().animate({marginTop:"-125px"},300);
                    if($(".faceDiv").children().length==0){
                        for(var i=0;i<ImgIputHandler.facePath.length;i++){
                            $(".faceDiv").append("<img title=\""+ImgIputHandler.facePath[i].faceName+"\" src=\"face/"+ImgIputHandler.facePath[i].facePath+"\" />");
                        }
                        $(".faceDiv>img").click(function(){

                            isShowImg=false;
                            $(this).parent().animate({marginTop:"0px"},300);
                            ImgIputHandler.insertAtCursor($(".Input_text")[0],"["+$(this).attr("title")+"]");
                        });
                    }
                }else{
                    isShowImg=false;
                    $(this).parent().prev().animate({marginTop:"0px"},300);
                }
            });

        },

    }
</script>
</html>